<template>
    <div>
        <el-container>
            <el-header>Element学习</el-header>
            <el-container>
                <el-aside width="200px">知识列表</el-aside>
                <el-main>
                    <el-row>
                        <el-col :span="2">图标</el-col>
                        <el-col :span="22">
                            <i class="el-icon-edit"></i>
                            <i class="el-icon-share"></i>
                            <i class="el-icon-delete"></i>
                            <!--前置图标-->
                            <el-button type="primary" icon="el-icon-search">搜索</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">按钮</el-col>
                        <el-col :span="22">
                            <el-button>默认按钮</el-button>
                            <el-button type="success">成功按钮</el-button>
                            <el-button type="primary" :plain="true">主要按钮</el-button>
                            <el-button type="info" round>信息按钮</el-button>
                            <el-button icon="el-icon-search" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle></el-button>
                            <el-button type="warning" disabled>警告按钮</el-button>
                            <el-button type="info" plain disabled>信息按钮</el-button>
                            <el-button type="text">文字按钮</el-button>
                            <el-button type="primary" icon="el-icon-search">搜索</el-button>
                            <!--后置ele图标-->
                            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                            <!--按钮结合iconfont来用-->
                            <el-button type="primary">搜索 <i class="iconfont icon-sousuo"></i></el-button>
                            <el-button type="primary">播放 <i class="iconfont icon-bofang"></i></el-button>
                            <el-button type="primary"><i class="iconfont icon-fanhui"></i> 返回</el-button>
                            <!--前置ele图标-->
                            <el-button type="primary" icon="el-icon-share"></el-button>
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                            </el-button-group>
                            <el-button type="primary" :loading="true">加载中</el-button>
                            <el-button round>默认按钮</el-button>
                            <el-button size="medium" :round="true">中等按钮</el-button>
                            <el-button size="small" round>小型按钮</el-button>
                            <el-button size="mini" round>超小按钮</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">单选框</el-col>
                        <el-col :span="22">
                            <el-radio-group v-model="radio" @change="rad">
                                <el-radio :label="3">备选项</el-radio>
                                <el-radio :label="6">备选项</el-radio>
                                <el-radio :label="9">备选项</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">复选框</el-col>
                        <el-col :span="22">
                            <el-checkbox-group v-model="checkList" @change="che">
                                <el-checkbox label="复选框A"></el-checkbox>
                                <el-checkbox label="复选框B"></el-checkbox>
                                <el-checkbox label="复选框C"></el-checkbox>
                                <el-checkbox label="禁用" disabled></el-checkbox>
                                <el-checkbox label="选中且禁用" disabled></el-checkbox>
                            </el-checkbox-group>
                            <el-checkbox label="复选框1111111111111111" v-model="checked" @change="controlTrueAndFalse"></el-checkbox>
                            <!--全选功能的实现-->
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">输入框</el-col>
                        <el-col :span="22">
                            <div class="demo-input-suffix">
                                属性方式：
                                <el-input placeholder="请选择日期" suffix-icon="el-icon-date">
                                </el-input>
                                <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                                </el-input>
                            </div>
                            <div class="demo-input-suffix">
                                slot 方式：只有slot方式可以结合iconfont来用
                                <el-input placeholder="请选择日期">
                                    <i slot="suffix" class="el-input__icon el-icon-date"></i>
                                </el-input>
                                <el-input placeholder="请输入内容">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                                <!--input结合iconfont来用-->
                                <el-input placeholder="请输入内容">
                                    <i slot="prefix" class="el-input__icon iconfont icon-sousuo"></i>
                                </el-input>
                                <el-input placeholder="请输入内容">
                                    <i slot="suffix" class="el-input__icon iconfont icon-sousuo"></i>
                                </el-input>
                            </div>
                            <!--input和button图标的结合,iconfont的使用-->
                            <el-input placeholder="请输入内容">
                                <el-button slot="prepend"><i class="iconfont icon-sousuo"></i></el-button>
                            </el-input>
                            <el-input placeholder="请输入内容">
                                <el-button slot="append"><i class="iconfont icon-sousuo"></i></el-button>
                            </el-input>
                            <el-input placeholder="请输入内容"  v-model="input" clearable @clear="clearInputVal">
                                <el-button slot="append" icon="el-icon-search" @click="inputVal"></el-button>
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">计数器</el-col>
                        <el-col :span="22">
                            <el-input-number @change="changeNum" v-model="num" :min="1" :step="1" :max="10" size="medium"></el-input-number>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">select选择器</el-col>
                        <el-col :span="22">
                            <el-select v-model="val" placeholder="请选择" @change="selectVal">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">联级选择器</el-col>
                        <el-col :span="22">
                            <el-cascader :options="list" change-on-select v-model="itemArray" @change="changeItemArray"></el-cascader>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">switch开关</el-col>
                        <el-col :span="22">
                            <el-switch
                                style="display: block"
                                v-model="switchVal"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="按月付费"
                                inactive-text="按年付费"
                                @change="changeSwitchVal"
                                active-value="开心"
                                inactive-value="不开心">
                            </el-switch>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">slide滑块</el-col>
                        <el-col :span="22">
                            <el-slider v-model="sliderVal" @change="changeSliderVal"></el-slider>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">日期选择器</el-col>
                        <el-col :span="22">
                            <el-date-picker
                                v-model="dataPickerVal"
                                type="date"
                                placeholder="选择日期"
                                @change="changeDatePickerVal"
                                value-format="timestamp">
                            </el-date-picker>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">upload上传</el-col>
                        <el-col :span="22">
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                v-model="upLoadVal"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :on-progress="uploadProgress"
                                :on-change="changeUpLoadVal">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">Rate评分</el-col>
                        <el-col :span="22">
                            <el-rate v-model="rateVal" @change="changeRateVal" show-text></el-rate>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">颜色选择器</el-col>
                        <el-col :span="22">
                            <el-color-picker v-model="color1" @change="changeColorVal"></el-color-picker>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">穿梭框</el-col>
                        <el-col :span="22">
                            有待研究
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">表格</el-col>
                        <el-col :span="22">
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                                <el-table-column prop="address" label="地址"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">标签</el-col>
                        <el-col :span="22">
                            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">进度条</el-col>
                        <el-col :span="22">
                            <el-progress :percentage="10" type="circle"></el-progress>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">树形控件</el-col>
                        <el-col :span="22">
                            <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick">
                            </el-tree>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">分页</el-col>
                        <el-col :span="22">
                            <el-pagination layout="prev, pager, next"  @current-change="currentPage" :total="1000" :page-size="50"></el-pagination>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">徽标</el-col>
                        <el-col :span="22">
                            <el-badge :value="200" :max="99" class="item" type="primary">
                                <el-button size="small">评论</el-button>
                            </el-badge>
                            <el-badge :value="100" :max="10" class="item">
                                <el-button size="small">回复</el-button>
                            </el-badge>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">Alert</el-col>
                        <el-col :span="22">
                            <el-alert title="成功提示的文案" type="success"></el-alert>
                            <el-alert title="消息提示的文案" type="info"></el-alert>
                            <el-alert title="警告提示的文案" type="warning"></el-alert>
                            <el-alert title="错误提示的文案" type="error"></el-alert>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">Loading</el-col>
                        <el-col :span="22">
                            <el-button type="primary" @click="requestData"><i class="iconfont icon-sousuo"></i> 搜索</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">提示信息</el-col>
                        <el-col :span="22">
                            <el-button @click="tip" plain type="primary">提示信息，可关闭</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">弹框</el-col>
                        <el-col :span="22">
                            <el-button @click="tankuang" plain type="primary">确定框</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">通知</el-col>
                        <el-col :span="22">
                            <el-button @click="notice" plain type="primary">右下角通知</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">面包屑导航</el-col>
                        <el-col :span="22">
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">文字提示</el-col>
                        <el-col :span="22">
                            <el-tooltip class="item" effect="dark" content="右上角很重要" placement="right-start">
                                <div class="wenzitishi">右上角很重要</div>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">卡片</el-col>
                        <el-col :span="22">
                            <div class="box">
                                <el-card :body-style="{ padding: '0px'}" class="box-content" shadow="hover">
                                    <img src=".././assets/images/timg01.jpg" class="image">
                                    <div style="padding: 14px;">
                                        <span>好吃的汉堡</span>
                                        <div class="bottom clearfix">
                                            <time class="time">{{ currentDate }}</time>
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card :body-style="{ padding: '0px'}" class="box-content" shadow="hover">
                                    <img src=".././assets/images/timg01.jpg" class="image">
                                    <div style="padding: 14px;">
                                        <span>好吃的汉堡</span>
                                        <div class="bottom clearfix">
                                            <time class="time">{{ currentDate }}</time>
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card :body-style="{ padding: '0px'}" class="box-content" shadow="hover">
                                    <img src=".././assets/images/timg01.jpg" class="image">
                                    <div style="padding: 14px;">
                                        <span>好吃的汉堡</span>
                                        <div class="bottom clearfix">
                                            <time class="time">{{ currentDate }}</time>
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card :body-style="{ padding: '0px'}" class="box-content" shadow="hover">
                                    <img src=".././assets/images/timg01.jpg" class="image">
                                    <div style="padding: 14px;">
                                        <span>好吃的汉堡</span>
                                        <div class="bottom clearfix">
                                            <time class="time">{{ currentDate }}</time>
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                            <div>
                                <el-card class="box-card">
                                    <div v-for="o in 4" :key="o" class="text item">
                                        {{'列表内容 ' + o }}
                                    </div>
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">导航菜单</el-col>
                        <el-col :span="22">
                            <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                                <el-menu-item index="1">处理中心</el-menu-item>
                                <el-submenu index="2">
                                    <template slot="title">我的工作台</template>
                                    <el-menu-item index="2-1">选项1</el-menu-item>
                                    <el-menu-item index="2-2">选项2</el-menu-item>
                                    <el-menu-item index="2-3">选项3</el-menu-item>
                                    <el-submenu index="2-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                            </el-menu>
                            <br>
                            <h3>垂直的导航菜单</h3>
                            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                                <el-submenu index="1">
                                    <!--具名插槽:名叫title的插槽-->
                                    <template slot="title">
                                        <i class="el-icon-location"></i>
                                        <span>导航一</span>
                                    </template>
                                    <el-menu-item-group>
                                        <template slot="title">分组一</template>
                                        <el-menu-item index="1-1">选项1</el-menu-item>
                                        <el-menu-item index="1-2">选项2</el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group title="分组2">
                                        <el-menu-item index="1-3">选项3</el-menu-item>
                                    </el-menu-item-group>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                                <el-menu-item index="2">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">导航二</span>
                                </el-menu-item>
                                <el-menu-item index="3" disabled>
                                    <i class="el-icon-document"></i>
                                    <span slot="title">导航三</span>
                                </el-menu-item>
                                <el-menu-item index="4">
                                    <i class="el-icon-setting"></i>
                                    <span slot="title">导航四</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">选项卡</el-col>
                        <el-col :span="22">
                            <el-tabs type="border-card" @tab-click="xuanxiangka">
                                <el-tab-pane>
                                    <!--使用具名插槽，这样就可以自定义图标-->
                                    <span slot="label">
                                        <i class="el-icon-date"></i> 我的行程
                                    </span>
                                    我的行程
                                </el-tab-pane>
                                <el-tab-pane>
                                    <span slot="label">
                                        <i class="iconfont icon-sousuo"></i> 搜索
                                    </span>
                                    搜索一下，有没有可爱的东西
                                </el-tab-pane>
                                <el-tab-pane label="消息中心">消息中心</el-tab-pane>
                                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                            </el-tabs>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">下拉菜单</el-col>
                        <el-col :span="22">
                            <el-dropdown hide-on-click trigger="click" @command="xialacaidan">
                                <el-button type="primary">
                                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="1">黄金糕</el-dropdown-item>
                                    <el-dropdown-item :command="2">狮子头</el-dropdown-item>
                                    <el-dropdown-item :command="3">螺蛳粉</el-dropdown-item>
                                    <el-dropdown-item :command="4"disabled>双皮奶</el-dropdown-item>
                                    <el-dropdown-item :command="5" divided>蚵仔煎</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">步骤条</el-col>
                        <el-col :span="22">
                            <el-steps :active="active" finish-status="success">
                                <el-step title="开始注册" description="这是一段很长很长很长的描述性文字"></el-step>
                                <el-step title="身份验证"></el-step>
                                <el-step title="注册成功"></el-step>
                            </el-steps>
                            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">对话框</el-col>
                        <el-col :span="22">
                            <!--@click事件执行后的结果为：dialogFormVisible = true-->
                            <el-button type="text"  @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

                            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                                <el-form :model="form">
                                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                                        <el-input v-model="form.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                                        <el-select v-model="form.region" placeholder="请选择活动区域">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                                </div>
                            </el-dialog>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">轮播图</el-col>
                        <el-col :span="22">
                            <el-carousel :interval="4000" arrow="always">
                                <el-carousel-item v-for="item in imgs" :key="item">
                                    <img :src="item">
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">折叠面板</el-col>
                        <el-col :span="22">
                            <el-collapse accordion @change="zhediemianban">
                                <el-collapse-item name="1">
                                    <template slot="title">
                                        一致性 Consistency<i class="header-icon el-icon-info"></i>
                                    </template>
                                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                                </el-collapse-item>
                                <el-collapse-item title="反馈 Feedback"  name="2">
                                    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                                    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                                </el-collapse-item>
                                <el-collapse-item title="效率 Efficiency" name="3">
                                    <div>简化流程：设计简洁直观的操作流程；</div>
                                    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                                    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                                </el-collapse-item>
                                <el-collapse-item title="可控 Controllability" name="4">
                                    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                                    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">
                            模态框
                        </el-col>
                        <el-col :span="22">
                            <el-button type="primary" @click="isShowModel">模态框</el-button>
                            <el-dialog title="收货地址" center width="30%" :visible.sync="dialogTableVisible">
                                <el-table v-loading="loading" empty-text="暂无数据" :data="gridData" border style="width: 100%" height="150" :show-header="false">
                                    <el-table-column align="center" property="date" style="width: 100%"></el-table-column>
                                    <div slot="append" style="text-align:center;padding:10px 0;cursor: pointer;">
                                        <i style="font-size:12px;position:relative;bottom:1px;right:3px;" class="iconfont icon-jiajianzujianjiahao"></i>添加类型</div>
                                </el-table>
                            </el-dialog>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">表单验证</el-col>
                        <el-col :span="22">
                            <el-form status-icon :model="personInfomation" ref="info" label-width="100px" class="demo-ruleForm">
                                <el-form-item prop="admin" label="账号：" :rules="[{required:true,message:'身份证不能为空'},{pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message:'身份证要满足15/17/18位'}]">
                                    <el-input placeholder="请输入身份证号" v-model="personInfomation.admin"  auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="upwd" label="密码：" :rules="[{required:true,message:'密码不能为空'},{pattern:/^[\w_-]{6,16}$/,message:'密码为6-16位'}]">
                                    <el-input placeholder="请输入密码" type="password" v-model="personInfomation.upwd"  auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码： " prop="confirmUpwd" :rules="confirmPassword">
                                    <el-input placeholder="确认密码" type="password" v-model="personInfomation.confirmUpwd" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <!--<el-row type="flex" justify="space-between" align="middle">-->
                        <!--<el-col>11111</el-col>-->
                        <!--<el-col>22222</el-col>-->
                        <!--<el-col>33333</el-col>-->
                        <!--<el-col>44444</el-col>-->
                    <!--</el-row>-->
                </el-main>
            </el-container>
            <el-footer>
                    <div class="contain-title">底部注释</div>
                    <div class="contain-content">
                        1、:plain=true和plain一样，round/circle/disabled/loading同理,所有单个的都同理 <br>
                        2、单选选中的是label的值 <br>
                        3、复选框选中的是label值组成的数组 <br>
                        4、只有当所有的正则都为true时，表单才能成功提交 <br>
                        5、表单输入框需要借助focus/blur/watch/click，单选、复选、选择框需要用到change <br>
                        6、搜索框：借助click/clear事件：clear清除的是返回的数组 ///登录和注册需要借助正则/blur/focus事件 <br>
                        7、select选择器，显示的值为value,实际选中要提交给服务器的值为label的值 <br>
                        8、联级选择器：用于进行区域选择，实际选中的是value值组成的数组，显示的是label值串 <br>
                        9、switch开关：选中的是active-value的值，不写默认为true/false <br>
                        10、日期选择器：选中的是value-format的值 //用于输入入学时间以及生日信息等 <br>
                        11、文件上传：有待考究 <br>
                        12、评分：选中时为具体的分值 <br>
                        13、颜色选择器：选中的是具体的分值 <br>
                        14、表格：要显示的其实是prop的值，默认为对象数组 <br>
                        15、splice：从几开始，删除几个，添加什么,用于实现数组的删除、添加、替换等功能 <br>
                        16、进度条：值为:percentage,可以通过监听值的变化，并赋值给percentage来完成动态的进度条 <br>
                        17、树形控件：通过e.label获取选中的值 <br>
                        18、total总条目数：由服务器数据多少决定；page-size每页要显示的条目数，一般固定下来
                        20=1000/50 <br>
                        19、loading加载框：主要用于服务器端请求前的操作，主要为了提高用户体验感，请求前const loading=this.$loading;请求后：loading.close()，不能加上lock:true,容易出现样式问题 <br>
                        20、所有的this.$loading/this.$message类型的都有一个close方法，用来关闭的。<br>
                        21、MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容 <br>
                        22、确定框：this.confirm的lockScroll需要为false，否则容易出现样式问题 <br>
                        23、通知框：通常用于搞活动，右下角通知！用setTimeout+setInterval定时器来做 <br>
                        24、文字提示：主要用来做省略字的提示 <br>
                        25、导航菜单：select事件：选中时得到两个值：一个是子菜单的选中的具体的某一项的 index, 另一个是子菜单的选中的具体的某一项的 index 要走的路径，如：2-4-1 (3) ["2", "2-4", "2-4-1"]；2-4-1是index的值；["2", "2-4", "2-4-1"]是index被选中时所走的路径过程形成的数组；open事件：选中时得到两个值：一个是子菜单的index,另一个是子菜单的选中的index要走的路径：如：1 ["1"]；close事件同open事件<br>
                        26、具名插槽的使用：一边定义一个具名插槽slot name='title'，另一边调用template slot='title',当然也可以其他的标签，但是template更好。 <br>
                        27、如何实现管理平台？ 选项卡+导航菜单+嵌套路由+布局(优先布局) <br>
                        28、下拉菜单：是通过command事件来获取选中项的值的，获取到的是某一项的command属性的值 <br>
                        29、步骤条：0,1,2三步曲，0这一步需要在created中执行一遍，先发起服务请求，然后1,2两步在点击事件中进行,完成后直接跳转 <br>
                        30、@click="dialogFormVisible = false"表示click事件执行完后，dialogFormVisible = false <br>
                        31、element每个标签本质上都是一个类，如：el-button它的类为：.el-button <br>
                        32、折叠面板：选中的是name的值
                        33、表单验证：涉及到验证时，表单项的prop是必填项，而且必须和v-model的值一样
                    </div>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
    export default {
        name:'ele',
        data(){
            const defineAction=(rule,value,callback)=>{
                if (value === '') {
                    callback(new Error('确认密码不能为空！'));
                } else if (value !== this.personInfomation.upwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                radio:3,
                checkList:['复选框A'],
                checked:true,
//               全选功能
                checkAll: false,
                checkedCities: ['上海', '北京'],
                cities: ['北京','上海','广州','深圳'],
                isIndeterminate: true,
//                全选上面
                input:'',
                num:1,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                val: '',
                list: [
                    {
                        value: 'zhinan',
                        label: '指南',
                        children: [
                            {
                                value: 'shejiyuanze',
                                label: '设计原则',
                                children: [
                                    {
                                        value: 'yizhi',
                                        label: '一致'
                                    },
                                    {
                                        value: 'fankui',
                                        label: '反馈'
                                    },
                                    {
                                        value: 'xiaolv',
                                        label: '效率'
                                    },
                                    {
                                        value: 'kekong',
                                        label: '可控'
                                    }
                                ]
                            },
                            {
                                value: 'daohang',
                                label: '导航',
                                children: [
                                    {
                                        value: 'cexiangdaohang',
                                        label: '侧向导航'
                                    },
                                    {
                                        value: 'dingbudaohang',
                                        label: '顶部导航'
                                    }
                                ]
                            }
                        ]
                    }
                ],
                itemArray:[],
                switchVal:"开心", //默认为true/false
                sliderVal:20,
                dataPickerVal:'',
//                文件上传功能
                upLoadVal:'',
                dialogImageUrl: '',
                dialogVisible: false,
//                文件上传上面
                rateVal:4,
                color1:'#2F0404',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                dynamicTags: ['标签一', '标签二', '标签三'],
//                树形控件
                treeData: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1'
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //卡片
                currentDate:new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),
//                步骤条
                active:0,
//                对话框
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                imgs:[require('.././assets/images/timg01.jpg'),require('.././assets/images/timg02.jpg'),require('.././assets/images/timg03.jpg'),require('.././assets/images/timg04.jpg')],
                //模态框
                dialogTableVisible:false,
                gridData:[],
                loading:true,//加载显示
                //表单验证
                personInfomation:{
                    admin:'',
                    upwd:'',
                    confirmUpwd:''
                },
                //自定义验证
                confirmPassword:[{required:true,validator:defineAction}],
            }
        },
        created(){
          setInterval(()=>{
              let end=new Date("2019/10/20 20:00:00");//到期时间
              let now=new Date();//现在时间
              let t=parseInt((end-now)/1000); //时间差转为（秒）
              let h=parseInt(s%(3600*24)/3600); //去掉天数，余下的秒数继续除以3600得小时
              let m=parseInt(s%3600/60);//去掉小时，余下秒数除以60得到分钟
              let d=parseInt(s/(3600*24));//直接除以(3600*24)得到天数
              let s=t%60; //去掉分钟，余下就只剩下秒数了
              this.$notify({
                  title: "活动：",
                  dangerouslyUseHTMLString: true,//是否可以富文本
                  message: `双十一倒计时：<span>${d}</span>${h}<span>${m}</span><span>${s}</span>`,
                  position: 'bottom-right',
                  type:'success'
              });
          },60000);
            //步骤条：在这里先发一遍请求给服务器
            console.log(this.active);
            //请求表格数据
            this.$axios.get('/api/tableDatas').then(res=>{
                //等待结束，数据加载结束
                this.loading=false;
                console.log(res.data);
                this.gridData=res.data
            })
        },
        methods:{
            rad(val){
                console.log(val)
            },
            che(e){
                console.log(e)
            },
            controlTrueAndFalse(e){
                console.log(e)
            },
//            全选功能
            handleCheckAllChange(val) {
                //如过val为真，那么选中项checkedCities就为cities
                this.checkedCities = val ? this.cities : [];
                //小横线就隐藏起来，打上勾
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(arr) {
//                arr为选中项，是要传给后台的数据，它是由label值组成的数组，一般会给个id作为唯一性标识，然后利用唯一性标识组成的数组，转为字符串，才能往后台传
                console.log(arr.join(''));
                //如果传上来的arr的长度等于cities的长度，那么checkAll就全选中
                this.checkAll = arr.length === this.cities.length;
                //如果长度大于0但是小于cities的长度,那么小横线就显示
                this.isIndeterminate = arr.length > 0 && arr.length < this.cities.length;
            },
//          输入框
            inputVal(){
                console.log(this.input)
            },
            clearInputVal(){
                //这里清空服务器返回的数组
            },
            changeNum(e){
                console.log(e);
            },
            selectVal(e){
                console.log(e)
            },
            changeItemArray(e){
                console.log(e)
            },
            changeSwitchVal(e){
                console.log(e)
            },
            changeSliderVal(e){
                console.log(e)
            },
            changeDatePickerVal(e){
                console.log(e)
            },
//            文件上传功能
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;//图片显示路径
                this.dialogVisible = true;//放大图片
            },
            uploadProgress(e, file, fileList){
                console.log(e,file,fileList)
            },
            changeUpLoadVal(file, fileList){
                console.log(file)
            },
            //评分
            changeRateVal(e){
                console.log(e)
            },
            changeColorVal(e){
                console.log(e)
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            //树形控件
            handleNodeClick(e) {
                console.log(e.label);
            },
            currentPage(e){
                console.log(e)
            },
            //loading发起网络请求
            requestData(){
                const loading=this.$loading({
                    //不能加上lock，容易出现格式问题
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    fullscreen:true
                });
                this.$axios.get('/api/seller',{params:{}}).then(res=>{
                    //等待框消失
                    loading.close();
                    console.log(res.data);
                    //提示注册成功与否
                    setTimeout(()=>{
                        this.$message({
                            message:res.data.message,
                            type:'success',
                            showClose: true
                        })
                    },2000);
                })
            },
            //消息提示
            tip(){
                this.$message({
                    showClose: true,
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                })
            },
            //弹框
            tankuang(){
                this.$confirm('确定删除您中意的商品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    //lockScroll需要为false，否则容易出现样式问题
                    lockScroll:false
                }).then(() => {
                    //这里把删除参数上传给服务器，服务器返回数据，根据‘返回数据’的判断来决定提示什么信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                        showClose:true
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        showClose:true
                    });
                });
            },
            //搞活动的通知
            notice(){
                this.$notify({
                    title: "活动：",
                    message: '双十一来临，大家赶紧购物吧，有丰厚的优惠哦！',
                    position: 'bottom-right',
                    type:'success'
                });
            },
//            导航菜单
            handleSelect(key, keyPath) {
                console.log(key, keyPath); //2-4-1 (3) ["2", "2-4", "2-4-1"]
            },
//            垂直的导航菜单
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
//            选项卡
            xuanxiangka(val){
                //选中的是tab实例
                console.log(val.paneName)//得到选项卡的具体某一项的值
            },
//            下拉菜单
            xialacaidan(e){
                console.log(e)
            },
//            步骤条
            next() {
                //根据active来获取后台的数据
                if(this.active>2){
                   return
                }
                this.active++;
                console.log(this.active);
            },
//            折叠面板
            zhediemianban(e){
                console.log(e)
            },
            //模态框
            isShowModel(){
                this.dialogTableVisible=true;
            },
            //表单验证
            submitForm(){
                this.$refs.info.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }

        },

    }
</script>
<style scoped lang="less">
    @import ".././assets/less/variables";
    @import ".././assets/less/mixins";
    .el-header{
        text-align: center;
        font-size: @fontSize-large;
        background-color: #B3C0D1;
        color: #333;
        padding:0;
        line-height:60px;
    }
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        padding:0;
        display: flex;
        justify-content:space-between;
        align-items: center;
        height:100% !important;
    }
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        justify-content:center;
        display:flex;
        align-items: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        padding:0
    }
    .el-row{
        margin:10px 0;
    }
    .el-row .el-col:first-child{
        text-align:center
    }
    .contain-title{
        width:200px;
        text-align:center;
    }
    .contain-content{
        flex:1;
        text-align:left;
        font-family:linxin;
        font-size:@fontSize-Small;
        padding:10px;
        line-height:1.5em
    }
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    .wenzitishi{
        display:block;
        width:50px;
        background: @bg-color;
        line-height:2em;
        color:@color;
        overflow: hidden;
        text-align: center;
        /*less调用css类*/
        .ellipse();
        &:hover{
            background: @color;
            color: @color-black;
        }
    }
    /*卡片*/
    .box{
        width:100%;
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing:border-box;
    }
    .box-content{
        width:49.6%;
        margin:5px 0 0;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /*轮播图*/
    .el-carousel__item img {
        width:100%;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>